<template>
  <div
    :key="scrollType"
    :class="flexClass"
    :style="flexStyle"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name:"mm-column",
  props: {
    wrap: {// 是否换行
      type: Boolean,
      default: false
    },

    align: {// 子组件对齐方式：left、center、right、stretch
      type: String,
      default: "left"
    },

    space: {// 子组件排列方式：start、center、between、around、evenly、end
      type: String,
      default: "start"
    },

    shadow: {// 阴影显示类型：always、hover、none
      type: String,
      default: null
    },

    scrollType: {// 滚动类型：scroll、scrollbar、scrollX、scrollbarX、scrollY、scrollbarY、none
      type: String,
      default: "none"
    },

    disableSelect: {// 是否禁止选中
      type: Boolean,
      default: false
    }
  },

  computed: {
    flexClass() {
      let info;
      if (this.shadow == "always") {
        info = "any-shadow";
      } else if (this.shadow == "hover") {
        info = "any-shadowhover";
      } else {
        info = "";
      }
      if (this.scrollType == "scroll") {
        info += " any-scroll any-scroll-none";
      } else if (this.scrollType == "scrollbar") {
        info += " any-scroll";
      } else if (this.scrollType == "scrollX") {
        info += " any-scroll-x any-scroll-none";
      } else if (this.scrollType == "scrollbarX") {
        info += " any-scroll-x";
      } else if (this.scrollType == "scrollY") {
        info += " any-scroll-y any-scroll-none";
      } else if (this.scrollType == "scrollbarY") {
        info += " any-scroll-y";
      }
      if (this.disableSelect) {
        info += " any-text-select-none";
      }
      return info;
    },

    flexStyle() {
      let style = "display:flex;flex-direction:column;flex-wrap:" + (this.wrap ? "wrap" : "nowrap");
      // 对齐方式
      style += ";align-items:";
      if (this.align == "center") {
        style += "center";
      } else if (this.align == "right") {
        style += "flex-end";
      } else if (this.align == "stretch") {
        style += "stretch";
      } else {// left
        style += "flex-start";
      }
      // 排列方式
      style += ";justify-content:";
      if (this.space == "center") {
        style += "center";
      } else if (this.space == "between") {
        style += "space-between";
      } else if (this.space == "around") {
        style += "space-around";
      } else if (this.space == "evenly") {
        style += "space-evenly";
      } else if (this.space == "end") {
        style += "flex-end";
      } else {
        style += "flex-start";
      }
      return style;
    }
  }
}
</script>

<style scoped>
.any-shadow {
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.any-shadowhover {
  border-radius: 4px;
  transition: 0.3s;
}

.any-shadowhover:focus,
.any-shadowhover:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.any-scroll {
  overflow-x: scroll;
  overflow-y: scroll;
}

.any-scroll-x {
  overflow-x: scroll;
  overflow-y: hidden;
}

.any-scroll-y {
  overflow-x: hidden;
  overflow-y: scroll;
}

/* .any-scroll::-webkit-scrollbar,
.any-scroll-x::-webkit-scrollbar,
.any-scroll-y::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.any-scroll::-webkit-scrollbar-thumb,
.any-scroll-x::-webkit-scrollbar-thumb,
.any-scroll-y::-webkit-scrollbar-thumb {
  background-color: #c2c2c2;
} */

.any-scroll-none {
  -ms-overflow-style: none;
}

.any-scroll-none::-webkit-scrollbar {
  display: none;
}

.any-text-select-none {
  user-select: none;
  -webkit-user-select: none;
}
</style>